<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<style type="text/css">
	.button{width: 100px;height: 30px;margin:3px 20px 3px 0;padding-top: 3px;}
	*{font-size: 14px;}
	.th td{font-weight: 700;}
	/* label{margin: 0 10px 0 18px;font-weight: 500;height: 25px;line-height: 25px;} */
     .control-label{padding: 0;font-weight: bold;}
     .diaform{margin: 20px auto;}
     h3{border-bottom:1px solid #ddd;padding-bottom:5px;width: 98%;  }
     .datagrid-view{border-top:1px solid #ddd;margin-top: 8px;}
     .datagrid-pager{border-bottom:1px solid #ccc;}
     hr{margin:15px 0 13px 0 ;background-color: #ddd;height: 1px;border: 0; width: 120%;}
     .jianju{margin-left:15px; }
     .datagrid-htable{
     font-weight:bold;
	/* background-color: #148CCA; */
	}
	.demo_line_01{
    
    margin: 5px 0;
    font-size: 50px;
    line-height: 1px;
    text-align: center;
	}
	.demo_line_01 .line{
	display:inline-block;
	   width:47.8%;
	   height:1px;
	   background:#ddd;
	   vertical-align:middle;
	   margin-top:8px;
	}
	.container-fluid{
	padding-left: 15px;
	}
	.datagrid-ftable td div{
		font-size: larger;
	
	}
	#pulldown{
		margin-top: 20px;
	}
	
/* td.datagrid-header-over{
	background: #148CCA !important;
} */
</style>
<title>财务纳表</title>
<style type="text/css">
.datagrid-ftable {
	color: red;
	font-weight: bold;
}
.datagrid-body {
height:300px !important;
}
.datagrid-view {
height:360px !important;
}

</style>
<script src="${ctxStatic}/js/echarts.js"></script>
<script type="text/javascript">
var isValid;
var helpType;
var data;
var flag=0;
var del=0;
var queryInit = false ;
var loginAccount = 'admin';
$(function(){
	 //设置下拉框默认选中"全部"
				$('#kdzx').combobox({onLoadSuccess:function(){
					var data = $('#kdzx').combobox('getData');
					if(data){
			 			$("#kdzx").combobox('select',data[0].userAccount);
					}
				}
				});
	
	
		$('#paymentType').combobox({onLoadSuccess:function(){
			var data = $('#paymentType').combobox('getData');
			if(data){
	 			$("#paymentType").combobox('select',data[0].id);
			}
		}
		});
		
		$(function(){
			$('#incomeType').combobox({onLoadSuccess:function(){
				var data = $('#incomeType').combobox('getData');
				if(data){
		 			$("#incomeType").combobox('select',data[0].id);
				}
			}
			});
			
			$('#paymentChannel').combobox({onLoadSuccess:function(){
				var data = $('#paymentChannel').combobox('getData');
				if(data){
		 			$("#paymentChannel").combobox('select',data[0].id);
				}
			}
			});
		});
	
		$("#search").click(function(){
			queryInit = false;
			var params = {
				startTime:$("#startTime").datebox('getValue'),
				endTime:$("#endTime").datebox('getValue'),
				tel:$("#tel").val(),
				name:$("#kdzx").combobox("getValue"),
				membername:$("#membername").val(),
				paymentType:$("#paymentType").combobox("getValue"),
				incomeType:$("#incomeType").combobox("getValue"),
				paymentChannel:$("#paymentChannel").combobox("getValue"),
			};
			$("#tt").datagrid({url:"/training1-web/income/list",queryParams:params});
		});
		
		init();
		
		//导出
		$("#export").click(function(){
			var params = {
					startTime:$("#startTime").datebox('getValue'),
					endTime:$("#endTime").datebox('getValue'),
					tel:$("#tel").val(),
					membername:$("#membername").val(),
					name:$("#kdzx").combobox("getValue"),
					paymentType:$("#paymentType").combobox("getValue"),
					incomeType:$("#incomeType").combobox("getValue"),
					paymentChannel:$("#paymentChannel").combobox("getValue"),
				};
			window.location.href="/training1-web/income/export?startTime="+params.startTime
					+"&endTime="+encodeURI(params.endTime)
					+"&tel="+encodeURI(params.tel)
					+"&name="+encodeURI(params.name)
					+"&paymentType="+encodeURI(params.paymentType)
					+"&incomeType="+encodeURI(params.incomeType)
					+"&paymentChannel="+encodeURI(params.paymentChannel)
					+"&membername="+params.membername
					;
		});
		
		$("#drop").click(function(){
			if($("#pulldown").css("display")=="none"){
				$("#pulldown").show(500);
				$(this).removeClass("glyphicon-download");
				$(this).addClass("glyphicon-upload");
			}else{
				$("#pulldown").hide(500);
				$(this).addClass("glyphicon-download");
				$(this).removeClass("glyphicon-upload");
			}
			setTimeout(function(){  
		    	$(".datagrid-wrap").css("height",window.innerHeight+'px');
		    },500);
		});
	});
	
function init(){
		$.ajax({
			url:'/training1-web/enum?enumName=IncomeType',			
			cache:true,
			async:false,
			success:function(data){
				IncomeType = data;
			}
		});
		$.ajax({
			url:'/training1-web/enum?enumName=PaymentChannel',			
			cache:true,
			async:false,
			success:function(data){
				PaymentChannel = data;
			}
		});
		$.ajax({
			url:'/training1-web/enum?enumName=PaymentType',			
			cache:true,
			async:false,
			success:function(data){
				PaymentType = data;
			}
		});
};

function getIncomeType(value,row,index){
	for(var g in IncomeType){
		if(IncomeType[g].id==value){
			return IncomeType[g].name;
		}
	}
	return value;
}
function getPaymentType(value,row,index){
	for(var g in PaymentType){
		if(PaymentType[g].id==value){
			return PaymentType[g].name;
		}
	}
	return value;
}
function getPaymentChannel(value,row,index){
	for(var g in PaymentChannel){
		if(PaymentChannel[g].id==value){
			return PaymentChannel[g].name;
		}
	}
	return value;
}

function rowStyle(index,row){
	if (index%2==0){     
        return 'background-color:lightcyan;';     
    }     
}

//日期格式化
function gettime(val,row,index){
	if (val!=null) {
		  var s = val.substr(0,10);
	}
	return s;
}

function formatMoney(number) {
//		if (number.indexOf(",") >= 0) {
//			number = number.replace(/\,/g, "");
//		}
//		if (isNaN(number) || number == "")
//			return "";
	number = Math.round(number * 100) / 100;
	return outputDollars(Math.floor(number - 0) + '') + outputCents(number - 0);
}
function outputDollars(number) {
	if (number.length <= 3)
		return (number == '' ? '0' : number);
	else {
		var mod = number.length % 3;
		var output = (mod == 0 ? '' : (number.substring(0, mod)));
		for (i = 0; i < Math.floor(number.length / 3); i++) {
			if ((mod == 0) && (i == 0))
				output += number.substring(mod + 3 * i, mod + 3 * i + 3);
			else
				output += ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
		}
		return (output);
	}
}
function outputCents(amount) {
	amount = Math.round(((amount) - Math.floor(amount)) * 100);

	if (amount == 10 || amount == 20 || amount == 30 || amount == 40
			|| amount == 50 || amount == 60 || amount == 70 || amount == 80
			|| amount == 90) {
		amount = (amount.toString()).substr(0, (amount.toString()).length - 1);
		return '.' + amount;
	} else if (amount == 0) {
		return "";
	} else if (amount == 1 || amount == 2 || amount == 3 || amount == 4
			|| amount == 5 || amount == 6 || amount == 7 || amount == 8
			|| amount == 9) {
		return '.0' + amount;
	} else {
		return '.' + amount;
	}
}

$(function(){
    $("#tel").textbox('textbox').bind('keyup', function(e){
	        $("#tel").textbox('setValue', $(this).val().replace(/\D/g,''));
    });
});
//鼠标悬停显示提示
function showTips(value, row, index) {
	var content = '';
	if(value != null && value != ''){
	    if(value.length>6 && strDateTime(value)){ //如果为时间
			value = value.substr(0,10);    	
	    }
	    content = '<span title="' + value + '" class="note" >' + value + '</span>';
	}
    return content;
}
//格式化金额
function formatMoney(number) {
	number = Math.round(number * 100) / 100;
	return outputDollars(Math.floor(number - 0) + '') + outputCents(number - 0);
}
function showIncomeTypeTips(value, row, index) {
	var i = getIncomeType(value,row,index);
    return showTips(i);
}
function showPaymentTypeTips(value, row, index) {
	var p = getPaymentType(value,row,index);
    return showTips(p);
}
function showPaymentChannelTips(value, row, index) {
	var p = getPaymentChannel(value,row,index);
    return showTips(p);
}
function showMoneyTips(value, row, index) {
	var m = formatMoney(value,row,index);
    return showTips(m);
}
//判断是否为时间格式 yyyy-MM-dd HH:mm:ss
function strDateTime(str){
	var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/; 
	var r = str.match(reg); 
	if(r==null)return false; 
	var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]); 
	return (d.getFullYear()==r[1]&&
	(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7
	]);
}

</script>
</head>
<body>
<div class="jianju">
<h3>财务纳表</h3>

<div id="tb" style="padding:5px;height:auto">
<div style="margin-bottom:5px">
	<a id="export" href="#" class="easyui-linkbutton button" iconCls="icon-daochu">导出</a>
</div>
<hr/>
	<div>
		<label style="margin-left:0;">发生时间：</label>
			<input id="startTime" type="text" class="easyui-datebox" style="width:120px" editable="false"/>
			&nbsp;~&nbsp;<input id="endTime" type="text" style="width:120px" class="easyui-datebox" editable="false"/>
		<a id="search" href="#" class="easyui-linkbutton button" style="margin-left:15px;" iconCls="icon-search">查询</a>	
		<br>
		<div id="pulldown" style="display: none;">
		<label style="margin-left:0px">开单中心：</label>
			<select id="kdzx"  class="easyui-combobox" style="width:120px" mode="remote"
					url="${ctx}/income/username"
					valueField="userAccount" textField="userName" method="get" editable="false"
					panelHeight="auto">
			</select>
		<label style="margin-left:15px">会员手机号：</label><input id="tel" class="easyui-textbox" style="width:110px">
		<label style="margin-left:15px;margin-right: 3px">会员姓名：</label><input id="membername" class="easyui-textbox" style="width:110px">
		
		<div style="margin-top: 20px;">
			<label style="margin-left:0px">收入类型：</label>
			<select id="incomeType"  class="easyui-combobox" style="width:120px" mode="remote"
					url="/training1-web/enum?enumName=IncomeType&all=true"
					valueField="id" textField="name" method="get" editable="false"
					panelHeight="auto">
			</select>
			<label style="margin-left:15px">支&nbsp;付&nbsp;方&nbsp;式：</label>
			<select id="paymentType"  class="easyui-combobox" style="width:110px;margin-left:3px" mode="remote"
					url="/training1-web/enum?enumName=PaymentType&all=true"
					valueField="id" textField="name" method="get" editable="false"
					panelHeight="auto">
			</select>
			<label style="margin-left:13px;">支付渠道：</label>
			<select id="paymentChannel"  class="easyui-combobox" style="width:110px" mode="remote"
					url="/training1-web/enum?enumName=PaymentChannel&all=true"
					valueField="id" textField="name" method="get" editable="false"
					panelHeight="auto">
			</select> 
		</div>
		
		</div>
		<div class="demo_line_01"><span class="line"></span> <span id="drop" style="font-size: 20px;margin-right:12px" class="glyphicon glyphicon-download"> </span><span class="line"></span></div>
		 
	</div>
</div>
	<table id="tt" class="easyui-datagrid" 
		url="/training1-web/income/list"
		title="" style="width:98%;minWidth:1000px;" 
		rownumbers="true" pagination="true"
		pageList="[200]" method="get"
		toolbar="#tb" singleSelect="true"
		fitColumns="true" idField="id" showFooter="true" rowStyler="rowStyle"
		pageSize="200"
		onLoadSuccess:function(data){
                $(".note").tooltip({
                    onShow: function(){
                        $(this).tooltip('tip').css({ 
                            width:'300',
                            boxShadow: '1px 1px 3px #292929'       
                                             
                        });
                    }
                });
             } >
		<thead>
			<tr>
				<th data-options="field:'orderNumber',align:'left',formatter:showTips" style="width:14%">订单编号</th>
				<th data-options="field:'memberName',align:'left',formatter:showTips" style="width:8%">会员姓名</th>
				<th data-options="field:'cellphone',align:'center',formatter:showTips" style="width:13%">会员手机号</th>
				<th data-options="field:'userName',align:'center',formatter:showTips" style="width:10%">开单中心</th>
				<th data-options="field:'incomeType',align:'center',formatter:getIncomeType,formatter:showIncomeTypeTips" style="width:10%">收入类型</th>
				<th data-options="field:'paymentType',align:'center',formatter:getPaymentType,formatter:showPaymentTypeTips" style="width:10%">支付方式</th>
				<th data-options="field:'paymentChannel',align:'center',formatter:getPaymentChannel,formatter:showPaymentChannelTips" style="width:10%">支付渠道</th>
				<th data-options="field:'incomeTimeStr',align:'center', formatter:gettime,formatter:showTips" style="width:12%">发生时间</th>
				<th data-options="field:'cash',align:'right' ,formatter:formatMoney,formatter:showMoneyTips" style="width:11%">金额</th>
			</tr>
		</thead>
	</table>
</div>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->  
<div id="main" style="width: 1500px; height: 400px;"></div> 		
<script type="text/javascript">  
        // 基于准备好的dom，初始化echarts实例  
        var myChart = echarts.init(document.getElementById('main'));  
        var url = '${pageContext.request.contextPath}/income/sumCash';  
        $.getJSON(url).done(function(json) {  
            // 2.获取数据  
            cash = json.cash;//金额
            userName = json.userName;//开单中心  
  
            // 3.更新图表myChart的数据  
            var option = {  
                title : {  
                    text : '财务纳表'  
                },  
                tooltip : {},  
                legend : {  
                    data : [ '金额' ],  
                },  
                xAxis : {  
                    data : userName  
                },  
                yAxis : {},  
                series :  {  
                    name : '金额',  
                    type : 'bar',  
                    data : cash  
                },   
                toolbox : {  
                    show : true,  
                    feature : {  
                        mark : {  
                            show : true  
                        },  
                        dataView : {  
                            show : true,  
                            readOnly : false  
                        },  
                        magicType : {  
                            show : true,  
                            type : 'bar' 
                        },  
                        restore : {  
                            show : true  
                        },  
                        saveAsImage : {  
                            show : true  
                        }  
                    }  
                },  
            }  
            myChart.setOption(option);  
        })  
    </script>  
</body>
</html>